
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>产品</title>
  <link rel="icon" href="img/片1.ico" type="images/x-ico" />
  <link rel="stylesheet" href="style.css">
</head>
<body>
	 <input type="checkbox" id="check">
    <label for="check">
        <i class="fas fa-bars" id="btn"></i>
        <i class="fas fa-times" id="cancel"></i>
    </label>
    <div class="sidebar">
     <header style="font-family: '666';font-size: 36px;">心旅计划</header>
        <ul>
            <li><a href="http://hu-chaofan.gitee.io/denglu/" target="_blank"><i class="fas fa-qrcode"></i>登录</a></li>
            <li><a href="http://hu-chaofan.gitee.io/testceshi/"><i class="fas fa-link"></i>记录</a></li>
            <li><a href="http://hu-chaofan.gitee.io/testtare/" target="_blank"><i class="fas fa-stream"></i>他人</a></li>
            <li><a href="#" style="font-size: 10px;" target="_blank"><i class="fas fa-calendar-week"></i>专业咨询师帮助<br>【团队建设中。。。】</a></li>
            <li><a href="http://hu-chaofan.gitee.io/test../" target="_blank"><i class="far fa-question-circle"></i>充值</a></li>
            <li ><a href="#" style="font-size: smaller;" target="_blank"><i class="fas fa-sliders-h"></i>社区【构建中。。。】</a></li>
            <li><a href="#" style="font-size: smaller;" target="_blank"><i class="far fa-envelope"></i>Feeback【构建中。。。】</a></li>
        </ul>
    </div>
  <div class="container">
    <img src="img/sarah-dorweiler-x2Tmfd1-SgA-unsplash.jpg" alt="" class="image">
    <div class="accordion-menu">
      <div class="item" id="item1">
        <a href="#item1" class="title">
          <span>构建你的心路历程</span>
          <i class="icon"></i>
        </a>
        <p class="text" style="font-family: '黑体';">
        在这里，你可以构建你的心里轨迹，记录内心历程。我们给你提供了一个更具个性化的心理平台，在这里不只有有重复的心灵鸡汤，更有具有切实可行的具体举措。
        行为微调内心状况，内心驱动行为。寻找与你具有相同思维模式的小伙伴，参考他们的行为尝试。这里开放，这里包容，高品质分享需要一定金额来购买，但你也可以通过在平台上活跃来赚取代币购买
        最重要的是，这里无需实名注册，保护你的隐私。
        </p>
      </div>

      <div class="item" id="item2">
        <a href="#item2" class="title">
          <span>记录你的点滴成长</span>
          <i class="icon"></i>
        </a>
        <p class="text" style="font-family: '黑体';">
         在这里，你可以构建你的心里轨迹，记录内心历程。我们给你提供了一个更具个性化的心理平台，在这里不只有有重复的心灵鸡汤，更有具有切实可行的具体举措。
        行为微调内心状况，内心驱动行为。寻找与你具有相同思维模式的小伙伴，参考他们的行为尝试。这里开放，这里包容，高品质分享需要一定金额来购买，但你也可以通过在平台上活跃来赚取代币购买
        最重要的是，这里无需实名注册，保护你的隐私。  </p>
      </div>

      <div class="item" id="item3">
        <a href="#item3" class="title">
          <span>参考他人的处境应对</span>
          <i class="icon"></i>
        </a>
        <p class="text" style="font-family: '黑体';">
      在这里，你可以构建你的心里轨迹，记录内心历程。我们给你提供了一个更具个性化的心理平台，在这里不只有有重复的心灵鸡汤，更有具有切实可行的具体举措。
        行为微调内心状况，内心驱动行为。寻找与你具有相同思维模式的小伙伴，参考他们的行为尝试。这里开放，这里包容，高品质分享需要一定金额来购买，但你也可以通过在平台上活跃来赚取代币购买
        最重要的是，这里无需实名注册，保护你的隐私。 </p>
      </div>

      <div class="item" id="item4">
        <a href="#item4" class="title">
          <span>分享你的成长故事</span>
          <i class="icon"></i>
        </a>
        <p class="text" style="font-family: '黑体';">
       在这里，你可以构建你的心里轨迹，记录内心历程。我们给你提供了一个更具个性化的心理平台，在这里不只有有重复的心灵鸡汤，更有具有切实可行的具体举措。
        行为微调内心状况，内心驱动行为。寻找与你具有相同思维模式的小伙伴，参考他们的行为尝试。这里开放，这里包容，高品质分享需要一定金额来购买，但你也可以通过在平台上活跃来赚取代币购买
        最重要的是，这里无需实名注册，保护你的隐私。 </p>
      </div>
    </div>
     <div style="margin: 0 0;visibility: hidden;width: 50px;"><audio controls autoplay> <source src="img/古典交响冥想8神游音乐47305.mp3" type="audio/mpeg"> 您的浏览器不支持</audio></div>	
  </div>

</body>
</html>